<template>
  <div id="user">
    <Template ref="template" name="用户" :urls="urls" :terms="terms" :props="props" :rules="rules" :actions="actions"
      @reset="reset" stateProp="status"></Template>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop,
    Watch
  } from 'vue-property-decorator';
  import md5 from 'js-md5';
  import {
    userName,
    password,
    name,
    idCard,
    phone,
    email
  } from '@/static/tool/validate.js';
  import Template from '@/components/template/manage.vue';

  @Component({
    components: {
      Template
    }
  })
  export default class User extends Vue {
    urls = {
      list: 'admin/user/list',
      save: 'admin/user/save',
      update: 'admin/user/update',
      reset: 'admin/user/reset',
      del: 'admin/user/delete'
    };

    rules = {
      userId: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          validator: userName,
          trigger: 'blur'
        }
      ],
      key: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          validator: password,
          trigger: 'blur'
        }
      ],
      roles: [{
        required: true,
        message: '请选择用户角色',
        trigger: 'blur'
      }],
      name: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        },
        {
          validator: name,
          trigger: 'blur'
        }
      ],
      idCard: [{
        validator: idCard,
        trigger: 'blur'
      }],
      phone: [{
          required: true,
          message: '请输入电话号码',
          trigger: 'blur'
        },
        {
          validator: phone,
          trigger: 'blur'
        }
      ],
      email: [{
          validator: email,
          trigger: 'blur'
        },
        {
          min: 5,
          max: 32,
          message: '邮箱长度为5-32位',
          trigger: 'blur'
        }
      ]
    };

    terms = [{
      code: 'userId',
      desc: '用户名'
    }, {
      code: 'name',
      desc: '姓名'
    }, ];

    props = [{
      code: 'userId',
      name: '用户名',
      readOnly: true,
      width: 120
    }, {
      code: 'key',
      name: '密码',
      tableHide: true,
      modifyHide: true
    }, {
      code: 'roles',
      name: '用户角色',
      tableHide: true,
      state: 'roles',
      multiple: true
    }, {
      code: 'name',
      name: '姓名',
      width: 100
    }, {
      code: 'phone',
      name: '手机号码',
      width: 130
    }, {
      code: 'idCard',
      name: '身份证号码',
      width: 180
    }, {
      code: 'email',
      name: '邮箱',
      width: 180
    }]

    actions = [{
      type: 'warning',
      name: '重置密码',
      width: 170,
      emit: 'reset',
      url: this.urls.reset
    }];

    reset(row) {
      const that = this
      this.$confirm('确定要重置用户‘' + row.userId + '’的密码吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$post(that.urls.reset, row).then(function(response) {
          if (response) {
            that.queryList()
          }
        })
      }).catch(() => {
        showMessage('info', '已取消重置密码')
      })
    }

    created() {
      this.$store.commit('getActionPers', 'user')
      this.$store.commit('queryRoleMap')
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style>
  #user {
    padding: 20px 20px 0px 20px;
  }
</style>
